<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <h2>首页</h2>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";
import { getHomeMultidata } from "../../network/home";

export default {
  name: "Home",
  components: {
    NavBar,
  },
  data() {
    return {
      // result: null,
      banners: [],
      reconmmends: [],
    };
  },
  created() {
    // 1.请求多个数据
    getHomeMultidata().then((res) => {
      console.log(res);
      // 函数调用一次数据就被回收了，要想一直存在就要在data里面定义一个变量进行保存,并且赋值res
      // this.result = res;
      this.banners = res.data.banner.list;
      // this.reconmmends = res.data.reconmmend.list;
    });
  },
};
</script>

<style scoped>
.home-nav {
  /* 使用css声明的变量 */
  background-color: var(--color-tint);
  color: #fff;
}
</style>